<template>
  <div>
    <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        v-loading="dataListLoading"
        fit>
      <el-table-column type="index" prop="id" label="序号" width="100" align="center"
                       header-align="center"></el-table-column>




      <el-table-column prop="content" label="内容" align="center" header-align="center"></el-table-column>
      <el-table-column prop="likes" label="点赞数" align="center" header-align="center"></el-table-column>
      <el-table-column prop="createTime" label="发布时间" align="center" header-align="center"></el-table-column>
      <el-table-column prop="isPublished" label="公开" width="100" align="center" header-align="center">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isPublished" active-color="#13ce66" @change="updateStatus($event,scope.row.id,'isPublished')" ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" header-align="center">
        <template slot-scope="scope">
          <el-button @click="editHandle(scope.row.id)">编辑</el-button>
          <el-button @click="deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalCount"
        layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "BlogList",
  data() {
    return {
      tableData: [],
      pageIndex: 1, //当前页
      pageSize: 10, //每页显示数据量
      totalCount: 0, //总页数
      dataListLoading: false, //加载
    }
  },
  methods: {
    getTableData() {
      this.dataListLoading = true;
      this.$http({
        url: '/moment/list',
        params: {
          'page': this.pageIndex,
          'limit': this.pageSize,
        }
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.tableData = data.data.list;
          this.totalCount = data.data.totalCount
          this.dataListLoading = false;
        }
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getTableData()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getTableData()
    },
    //删除动态
    deleteHandle(id) {
      this.$confirm(`确定删除本条动态?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: `/moment/delete/${id}`,
          method: 'post'
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getTableData()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    },
    //编辑动态
    editHandle(id) {
      this.$router.push(`/write_moment/edit/${id}`)
    },
    //修改动态状态
    updateStatus(event,id, status) {
      this.$http({
        url: `/moment/${status}/${id}`,
        method: 'post'
      }).then((data) => {
        if(data.data.code===0&&data){
          this.$message({
            message: '修改成功',
            type: 'success'
          });
        }else {
          this.form.status=!this.form.status;
          this.$message({
            message: '修改失败',
            type: 'error'
          });
        }
      })
    }
  },
  mounted() {
    this.getTableData();
  },


}
</script>

<style scoped>

</style>
